<template>
  <div class="navbar">
    <div></div>
    <div class="right-menu">
      <el-dropdown @command="handleClick">
        <span class="el-dropdown-link">
          {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
  import nuxtStorage from 'nuxt-storage'
  export default {
    computed: {
      name () {
        return this.$store.getters['user/userInfo']?.username || '用户'
      }
    },

    methods: {
      handleClick (e) {
        if(e == '1') {
          this.$store.commit("removeToken")
          this.$store.commit("user/removeUserInfo")
          this.$router.push(`/login?redirect=${this.$route.path}`)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  @include flex($jc: space-between, $alignI: center);
}
</style>